<template>
  <div class="sign-in-subscribe-user">
    <c-title text="有效用户"></c-title>
    <ul class="box">
      <li class="box-item" v-for="(item,i) in list" :key="i">
        <div class="flex">
          <van-image round width="30px" height="30px"  style='margin-right: 0.625rem;' :src="item.avatar_image" />
          <div style="text-align: left;">
            <p class="c-A3A3A3">{{item.username}}</p>
            <p class="c-A3A3A3">id：{{item.uid}}</p>
          </div>
        </div>
        <div>
          <p>{{item.active_value_total}}</p>
          <p class="c-A3A3A3">存储数量总额</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";
export default {
  components: { VanImage },
  data() {
    return {
      list: [],
      stage_id: null
    };
  },
  activated() {
    this.stage_id = this.$route.params.id;
    this.initData();
    this.getData();
  },
  methods: {
    initData() {
      this.list = []
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.valid-user.detail", { stage_id: this.stage_id });
      if (result == 0) return this.$toast(msg);
      this.list = data || [];
    }
  }
};
</script>

<style scoped lang="scss">
.sign-in-subscribe-user {
  padding: 0.75rem 0.5rem;

  .c-A3A3A3 {
    color: #a3a3a3;
  }

  .flex {
    display: flex;
  }

  .title {
    text-align: left;
    margin-bottom: 0.4375rem;
  }

  .box {
    display: flex;
    flex-direction: column;
  }

  .left {
    text-align: left;
  }

  .box-item {
    padding: 0.8125rem0.5rem;
    background: #fff;
    font-size: 0.75rem;
    border-radius: 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
  }
}
</style>
